<template>
  <view class="login-container">
    <view class="logo-text">乐游游戏</view>
    <view class="input-group">
      <view class="input-item">
        <up-icon name="account" class="mo-icon-r"></up-icon>
        <input
          v-model="username"
          class="input"
          type="text"
          placeholder="手机号/账号"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="input-item">
        <up-icon name="lock" class="mo-icon-r"></up-icon>
        <input
          v-model="password"
          class="input"
          :type="showPassword ? 'password' : 'text'"
          placeholder="密码"
          placeholder-class="input-placeholder"
        />
        <up-icon
          :name="showPassword ? 'eye-fill' : 'eye-off'"
          @click="showPassword = !showPassword"
        ></up-icon>
      </view>
    </view>
    <button
      class="login-btn"
      :class="{ active: canLogin }"
      :disabled="!canLogin"
      @click="handleLogin"
    >
      登录
    </button>
  </view>
</template>

<script>
import { setToken } from '@/utils/localStorage';
import { showToast } from '@/utils/helper';
export default {
  data() {
    return {
      username: "",
      password: "",
      showPassword: true,
    };
  },
  computed: {
    canLogin() {
      return this.username && this.password;
    },
  },
  methods: {
    handleLogin() {
      if (!this.canLogin) return;
      if(this.username === 'admin' && this.password === '123456'){
        uni.showToast({
          title: '登录成功',
          icon: 'success',
        });
        setToken('adminToken');
        uni.navigateTo({
          url: '/pages/index/home'
        })
        return 
      }
      return showToast('其他账户已禁用,请使用admin主账号登录');
    },
  },
};
</script>

<style scoped>
.login-container {
  padding: 80rpx 40rpx 0 40rpx;
}
.logo-text {
  text-align: center;
  font-size: 60rpx;
  font-weight: bold;
  letter-spacing: 10rpx;
  background: linear-gradient(90deg, #e93b3d 0%, #ffb347 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 60rpx;
  text-shadow: 0 6rpx 16rpx rgba(233, 59, 61, 0.15),
    0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.input-group {
  margin-bottom: 60rpx;
}
.input-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-bottom: 40rpx;
  padding-bottom: 10rpx;
}
.icon {
  font-family: "iconfont" !important;
  font-size: 40rpx;
  color: #bbb;
  margin-right: 20rpx;
}
.input {
  flex: 1;
  font-size: 32rpx;
  border: none;
  background: transparent;
  outline: none;
}
.input-placeholder {
  color: #bbb;
}
.login-btn {
  width: 100%;
  height: 90rpx;
  background: #eee;
  color: #fff;
  font-size: 36rpx;
  border: none;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
}
.login-btn.active {
  background: #e93b3d;
}
.login-btn:disabled {
  background: #eee;
  color: #fff;
}
.options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #999;
}
</style>
